<script setup lang="ts">
  import {useLoginStore} from "./LoginStore.ts";
  import {LoginCtrl} from "./LoginCtrl.ts";
  const ctrl = new LoginCtrl();
  const { formData } = useLoginStore();
</script>

<template>
  <form @submit.prevent="ctrl.handleSubmit">
    <div class="form-group">
      <label>用户名：</label>
      <input
          type="text"
          v-model="formData.userName"
          required
      >
    </div>

    <div class="form-group">
      <label>密码：</label>
      <input
          type="password"
          v-model="formData.password"
          required
      >
    </div>

    <button type="submit">登录</button>
  </form>
</template>

<style scoped>
.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
}

input {
  padding: 0.5rem;
  width: 200px;
}

button {
  padding: 0.5rem 1rem;
  background: #42b883;
  color: white;
  border: none;
  cursor: pointer;
}

</style>